<template>
  <d2-container>
    <div slot="header">
      <crud-search
        ref="search"
        :options="crud.searchOptions"
        @submit="handleSearch"
      />
      <el-button-group>
        <el-button size="small" type="primary" @click="addRow"
          ><i class="el-icon-plus"></i> 新增</el-button
        >
      </el-button-group>
      <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners" />
    </div>
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @view="getBlood"
    ></d2-crud-x>
    <el-dialog
      title="献血记录"
      :visible.sync="dialogVisible"
      width="70%"
      @closed="handleClose"
    >
      <el-table v-loading="loading" border stripe :data="bloodList">
        <el-table-column prop="drawer" label="采血人"></el-table-column>
        <el-table-column prop="bloodVolume" label="血量(ml)"></el-table-column>
        <el-table-column prop="drawDate" label="采血日期"></el-table-column>
        <el-table-column prop="expireDate" label="到期日期"></el-table-column>
        <el-table-column prop="isQualified" label="是否合格">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isQualified === 0" type="danger"
              >不合格</el-tag
            >
            <el-tag v-else type="success">合格</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isQualified" label="是否过期">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isOutdated === 0" type="success"
              >未过期</el-tag
            >
            <el-tag v-else type="danger">过期</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.remark ? scope.row.remark : "无" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span> -->
    </el-dialog>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import api from './api'
export default {
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      dialogVisible: false,
      bloodList: [],
      loading: false
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) { return api.getVolunteerList(query) },
    addRequest (row) { return api.addVolunteer(row) },
    updateRequest (row) { return api.updateVolunteer(row) },
    delRequest (row) { return api.deleteVolunteer(row._id) },
    handleClose () {
      this.bloodList.length = 0
    },
    async getBlood ($event) {
      this.loading = true
      // console.log('$event', $event)
      this.dialogVisible = true
      const { data, code } = await api.getBloodRecord($event.row._id)
      if (code === 0) {
        this.bloodList = data
      }
      this.loading = false
    }
  }
}
</script>
